<template>
  <aside @click="back_top" v-show="hide_type">
    <img src="https://p1.meituan.net/scarlett/87654d5e4e5e057206969c3abb8e09f33151.png">
    <span>返回顶部</span>
  </aside>
</template>

<script>
export default {
  props: ['el'],
  name:"MaoYanAside",
  data(){
    return {
      hide_type:false,
      ref:null
    }
  },
  methods: {
    back_top(){
      let _this = this;
      let interval = 50;
      var temp = setInterval(()=>{
        if(_this.ref.scrollTop>=interval){
          _this.ref.scrollTop -=interval;
        }else{
          _this.ref.scrollTop = 0;
          clearInterval(temp);
        }
      },1)
    }
  },
  mounted () {
    let ref = this.$parent.$refs.scroll_main;
    if(!ref) ref = this.$parent.$parent.$refs.scroll_main;
    if(!ref) ref = this.$parent.$parent.$parent.$refs.scroll_main;
    
    this.ref = ref;
    ref.addEventListener('scroll',()=>{
      if(ref.scrollTop>200){
        this.hide_type = true;
      }else if(ref.scrollTop == 0){
        this.hide_type = false;
      }
    })
  }
}
</script>

<style scoped>
    aside{
        width: 2.9rem;
        height: 1.013333rem;
        line-height: 1.013333rem;
        background-image:  linear-gradient(134deg,#fb3333,#ff5269 75%);
        position: fixed;
        top: 75%;
        right: 0;
        border-top-left-radius:50px;
        border-bottom-left-radius:50px;
        z-index: 10;
        opacity: 0.95;
    }

    img{
      width: 25px;
      vertical-align: middle;
      margin-left: 0.3rem;
    }

    span{
      color: white;
      font-size: .4rem;
      padding-left: .133333rem;
    }
</style>